import React from "react";
import PropTypes from "prop-types";

class Cell extends React.Component {
    static propTypes = {
        // 左侧字
        title: PropTypes.string.isRequired,
        // 右侧是否是输入框
        isInput: PropTypes.bool.isRequired,
        // 右侧字
        placeholder: PropTypes.string.isRequired,
        // onchange事件
        valueFunc: PropTypes.func,
        // 右边字体的颜色 input 无效
        rightFontColor: PropTypes.string,
        // 左侧图标的url
        icon: PropTypes.string,
        // 是否显示右侧图标
        rightIcon: PropTypes.bool,
        // 样式
        style: PropTypes.object,
        // cell 的 click 事件
        click: PropTypes.func,
        // input 类型
        type: PropTypes.string,
        // 必填
        mustFill: PropTypes.bool,
        disabled: PropTypes.bool,
        setValue: PropTypes.string,
    };


    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }

    render() {
        const {
            style,
            click,
            icon,
            setValue,
            disabled,
            mustFill,
            valueFunc,
            placeholder,
            rightFontColor,
            title,
            isInput,
            rightIcon,
            type
        } = this.props;
        return (
            <div
                className="cell"
                style={{
                    height: "35px",
                    // marginBottom: "1px",
                    borderTop:'1px solid #eee',
                    backgroundColor: "white",
                    fontSize: "1.1rem",
                    marginLeft:'1rem',
                    marginRight:'1rem',
                    ...style
                }}
                onClick={click}
            >
                {isInput ? (
                    <div>
                        <label
                            htmlFor="input"
                            style={{
                                width: "80px",
                                paddingLeft: "15px",
                                lineHeight: "35px",
                                textAlign: "center",
                                display: "inline-block",
                                color: "#383838"
                            }}
                        >
                            {mustFill ? (
                                <span style={{color: "red"}}>*</span>
                            ) : null}
                            {title}
                        </label>
                        <input
                            value={setValue}
                            type={type ? type : "text"}
                            onChange={e => {
                                valueFunc(e);
                            }}
                            style={{
                                border: "none",
                                color: "#b8b8b8",
                                outline: "none",
                                fontSize: "1.1rem",
                                width: "calc(100% - 140px)"
                            }}
                            placeholder={placeholder}
                            disabled={disabled}
                        />
                    </div>
                ) : (
                    <div
                        style={{
                            width: "100%",
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center"
                        }}
                    >
            <span
                style={{
                    // paddingLeft: "15px",
                    lineHeight: "35px",
                    display: "inline-block",
                    color: "#383838",
                    flexGrow: "1",
                    display:'flex',
                    alignItems:'center'
                }}
            >{icon ? (<img
                    style={{
                        width: "27px",
                        height: "27px",
                        marginRight: "10px",
                        // verticalAlign: "middle"
                        display:'block'
                    }}
                    src={icon}
                    alt=""
                />
            ) : null}
                <span style={{lineHeight: "35px"}}>{title}</span>
            </span><span style={{
                        color: rightFontColor,
                        flexGrow: "1",
                        textAlign: "right",
                        // paddingRight: "15px",
                        verticalAlign: "top"
                    }}
                    >{placeholder}
                        {rightIcon ? (
                            <img
                                style={{
                                    width: "15px",
                                    height: "15px",
                                    paddingLeft: "10px",
                                    verticalAlign: "middle"
                                }}
                                src="/authen/img/right.png"
                                alt=""
                            />
                        ) : null}</span>
                    </div>
                )}
            </div>
        );
    }
}

export default Cell;
